@import "Reset.scss";
@import "Same_Style.scss";
@import "../utils/iconfont.css";

@function Ant_Group($w) {
  @return calc($w / 1451) * 100 + vw;
}
@function font($w) {
  @return calc($w / 1451) * 100 + vmin;
}

body {
  overflow-x: hidden;
}
button,
input {
  outline: none;
  border: none;
}
.pointer {
  cursor: pointer;
}
// 投递项目hover样式

.wrap {
  width: Ant_Group(1451);
  font-family: "PingFang SC";
  // 头部
  .transparentNavBar {
    @include header;
    li{
      &:nth-child(3) > a{
        color: #1677ff;
      }
    }
  }
  .whiteNavBar{
    @include header;
    nav{
      background-color: #fff;
      a{
        color: #000 !important;
      }
      & li:nth-child(3) > a{
        color: #1677ff !important;
      }
    }
  }
  // 主体
  main {
    width: 100%;
    position: relative;
    // 顶部展览区域
    .main_top_box{
      width: 100%;
      height: 100vh;
      position: relative;
      overflow: hidden;
      .main_top_exhibition {
        width: 100%;
        height: 100%;
        position: absolute;
        background: url(../images/Campus\ Recruitment/A_v-6hTZSxdKsAAAAAAAAAAAAAARQnAQ.jpg)
          center center / cover no-repeat;
        display: flex;
        justify-content: center;
        align-items: center;
        // 文字/按钮区域
        .top_exhibition_content {
          display: flex;
          flex-direction: column;
          align-items: center;
          // 标题
          .top_exhibition_title {
            width: Ant_Group(617);
            margin-bottom: Ant_Group(65);
          }
          // 按钮
          .top_exhibition_btn {
            .recruit_btn {
              width: Ant_Group(160);
              height: Ant_Group(56);
              background: #fff;
              border-radius: Ant_Group(27);
              font-size: Ant_Group(16);
              font-weight: bold;
              color: #1677ff;
              transition: all 0.2s ease;
              &:hover {
                color: #fff;
                background-color: #1677ff;
              }
            }
          }
        }
      }
    }
    // 我要投递
    .main_send_block {
      width: Ant_Group(1451);
      height: Ant_Group(731);
      display: flex;
      flex-direction: column;
      align-items: center;
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: Ant_Group(120) 0 Ant_Group(64);
      }
      // 投递主体内容
      .send_content {
        width: Ant_Group(1088);
        display: flex;
        justify-content: space-between;
        // 投递内容项目
        .item_styleA{
          @include sendStyle;
        }
        .item_styleB{
          @include sendStyle;
          width: Ant_Group(380);
          background: url(../images/Campus\ Recruitment/A_qCuLQ4xyqP8AAAAAAAAAAAAAARQnAQ.png)
                center center / cover no-repeat;
                & > .title > p {
                  color: #fff;
                }
                & > .text > p {
                  color: #fff;
                }
                & > .main_send_btn {
                  width: Ant_Group(112);
                  height: Ant_Group(40);
                  background: hsla(0,0%,100%,.1);
                  border: 1px solid rgba(255, 255, 255, 0.15);
                  & > span,
                  i {
                    color: #fff;
                    display: block;
                  }
                }
        }
        .send_content_item {
          &:nth-child(1) {
            background: linear-gradient(
              180deg,
              rgba(175, 176, 179, 1) 0%,
              rgba(200, 201, 204, 0.72) 100%
            );
            & > .title > p {
              color: #fff;
            }
            & > .text > p {
              color: #fff;
            }
            & > button {
              display: none;
            }
          }
          &:nth-child(4) {
            & > .text > p:first-child {
              display: none;
            }
          }
        }
      }
      // 通知中心
      .notification_center {
        width: Ant_Group(1088);
        height: Ant_Group(171);
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        background-color: #fff;
        box-shadow: -10px 10px 40px 0 rgba(216, 218, 224, 0.5);
        border-radius: Ant_Group(12);
        margin-top: Ant_Group(47);
        padding: Ant_Group(26) Ant_Group(32) Ant_Group(26) Ant_Group(48);
        // 通知中心头部
        .notification_center_top {
          display: flex;
          justify-content: space-between;
          align-items: center;
          p {
            font-size: Ant_Group(18);
            font-weight: bold;
            color: rgb(51, 51, 51);
          }
          // 了解更多按钮
          .notification_center_btn {
            width: Ant_Group(90);
            height: Ant_Group(22);
            line-height: Ant_Group(22);
            color: rgb(153, 153, 153);
            font-weight: 400;
            font-size: Ant_Group(14);
            background-color: #fff;
            display: flex;
            i {
              padding-left: Ant_Group(8);
              font-size: Ant_Group(12);
              color: #1677ff;
            }
          }
        }
        // 通知中心底部
        .notification_center_bottom {
          .bottom_item {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            &:first-child {
              margin: Ant_Group(12) 0 Ant_Group(25);
            }
            .left_text {
              display: flex;
              align-items: center;
              .circular {
                width: Ant_Group(10);
                height: Ant_Group(10);
                border-radius: 50%;
                margin-right: Ant_Group(20);
                border: 2px solid rgba(171, 175, 184, 1);
              }
              p {
                font-size: Ant_Group(14);
                color: #333333;
                &:last-child {
                  width: Ant_Group(42);
                  height: Ant_Group(22);
                  border: 1px solid rgba(22, 119, 255, 0.13);
                  background: rgba(250, 250, 250, 1);
                  color: #1677ff;
                  font-size: Ant_Group(12);
                  border-radius: Ant_Group(4);
                  text-align: center;
                  line-height: Ant_Group(22);
                  margin-left: Ant_Group(16);
                }
              }
              & .freshmen {
                width: Ant_Group(54);
              }
            }
            .right_time {
              a {
                font-size: Ant_Group(14);
                color: #999999;
              }
            }
          }
        }
      }
    }
    // 感兴趣的职业类别
    .major_group {
      width: 100%;
      height: Ant_Group(696);
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      .lefTop_circular {
        width: Ant_Group(180);
        height: Ant_Group(180);
        position: absolute;
        top: 0;
        left: Ant_Group(-30);
        transform: translateY(-50%);
      }
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: Ant_Group(120) 0 Ant_Group(64);
      }
      // 主体内容

      .major_group_container {
        width: Ant_Group(1088);
        height: Ant_Group(456);
        position: relative;
        display: flex;
        ul {
          position: absolute;
          width: Ant_Group(156);
          height: Ant_Group(280);
          top: Ant_Group(88);
          left: Ant_Group(48);
          z-index: 999;
          li {
            width: 100%;
            padding: 0 Ant_Group(42) Ant_Group(8);
            color: rgb(153, 153, 153);
            font-weight: 600;
            font-size: Ant_Group(18);
            line-height: Ant_Group(40);
            text-align: left;
            cursor: pointer;
          }
        }
        // 职业详情视口
        .major_detailsViewport{
          width: 100%;
          height: 100%;
          // 胶片
          .major_detailsFilm{
            position: relative;
            height: 100%;
            // item
            .major_detailsItem{
              width: Ant_Group(1088);
              height: Ant_Group(456);
              background-color: #fff;
              box-shadow: -10px 10px 40px 0 rgba(216, 218, 224, 0.5);
              position: absolute;
              top: 0;
              left: 0;
              transform: translateY(Ant_Group(35));
              transition: all 0.4s ease;
              opacity: 1;
              &:first-child{
                opacity: 1;
                transform: translateY(0);
              }
              // 职业详情内容
              .major_group_details {
                width: 100%;
                height: 100%;
                box-sizing: border-box;
                .content {
                  width: Ant_Group(360);
                  height: Ant_Group(331);
                  padding: Ant_Group(62) Ant_Group(442) Ant_Group(62) Ant_Group(296);
                  & > p {
                    font-size: Ant_Group(14);
                    color: rgba(102, 102, 102, 1);
                    line-height: Ant_Group(22);
                    &:nth-child(1) {
                      margin-bottom: Ant_Group(8);
                      color: #333;
                      font-size: Ant_Group(26);
                      font-weight: 700;
                      line-height: Ant_Group(40);
                    }
                    &:last-of-type {
                      width: Ant_Group(360);
                      height: Ant_Group(198);
                      margin-bottom: Ant_Group(46);
                    }
                  }
                  .content_btn {
                    width: Ant_Group(152);
                    height: Ant_Group(40);
                    border-radius: Ant_Group(40);
                    background-color: #1677ff;
                    color: #fff;
                    & > i {
                      margin-left: Ant_Group(8);
                    }
                  }
                }
              }
            }
          }
        }
        // 右边图片容器
        .right_img_container {  
          width: Ant_Group(463);
          height: Ant_Group(463);
          position: absolute;
          right: 0;
          bottom: Ant_Group(93);
        }
      }
    }
    // 成长与福利
    .growth_and_welfare {
      width: 100%;
      height: Ant_Group(1212);
      display: flex;
      flex-direction: column;
      align-items: center;
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: Ant_Group(120) 0 Ant_Group(64);
      }
      //   主体内容
      .newcomer_container {
        // 新人模块内容
        .newcomer_container_content {
          display: flex;
          position: relative;
          width: Ant_Group(1106);
          padding: 0 Ant_Group(42);
          box-sizing: border-box;
          justify-content: flex-end;
          &:last-child {
            transform: rotateY(180deg);
            margin-top: Ant_Group(40);
          }
          &:last-child > .left_item {
            transform: rotateY(180deg);
          }
          &:last-child > .right_item {
            transform: rotateY(180deg);
          }
          // 左边模块
          .left_item {
            width: Ant_Group(400);
            margin: Ant_Group(29) 0;
            position: absolute;
            right: Ant_Group(658);
            border-radius: Ant_Group(12);
            overflow: hidden;
            z-index: 999;
          }
          // 右边模块
          .right_item {
            width: Ant_Group(664);
            height: Ant_Group(418);
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            padding: Ant_Group(52) Ant_Group(56) Ant_Group(52) Ant_Group(112);
            box-sizing: border-box;
            background-color: #fff;
            box-shadow: -10px 10px 40px 0 rgba(216, 218, 224, 0.5);
            border-radius: Ant_Group(12);
            & > p {
              font-size: Ant_Group(14);
              line-height: Ant_Group(22);
              color: #666666;
              & > span {
                font-weight: bold;
                color: #000;
              }
              &:nth-child(1) {
                font-size: Ant_Group(26);
                font-weight: bold;
                color: #333333;
                line-height: Ant_Group(36);
                text-align: left;
                margin-bottom: Ant_Group(35);
              }
            }
          }
        }
      }
    }
    // 学长学姐说
    .main_people_introduction {
      display: flex;
      flex-direction: column;
      align-items: center;
      h2 {
        font-size: Ant_Group(39);
        font-weight: bold;
        margin: Ant_Group(120) 0 Ant_Group(75);
      }
      // 人物卡片
      .people_introduction_card {
        width: Ant_Group(1137);
        height: Ant_Group(604);
        position: relative;
        & > button {
          @include bannerBtn;
          &:nth-of-type(1) {
            left: Ant_Group(-79);
            top: 40%;
            transform: translateY(-50%);
          }
          &:nth-of-type(2) {
            right: Ant_Group(-79);
            top: 40%;
            transform: translateY(-50%);
          }
          &:hover {
            background-color: rgba(0, 0, 0, 0.3);
          }
        }
        .cardBox{
          width: 100%;
          height: 100%;
          overflow: hidden;
          // 卡片内容区域
          ul {
            width: 100%;
            display: flex;
            transform: translateX(-100%);
            // 卡片容器
            li {
              flex-shrink: 0;
              width: 50%;
              display: flex;
              justify-content: center;
              .card_item_container {
                width: Ant_Group(518);
                height: Ant_Group(448);
                border-radius: Ant_Group(16);
                overflow: hidden;
                box-shadow: 0px 4px 20px 0 rgb(0 51 153 / 8%);
                // 卡片项目内容
                .card_item_content {
                  width: 100%;
                  height: 100%;
                  position: relative;
                  &:hover > .img_container ~ .text_container > p {
                    transform: translateY(0);
                  }
                  &:hover > .img_container ~ .text_container > .text_item {
                    transform: translateY(0);
                    overflow-y: auto;
                  }
                  &:hover
                    > .img_container
                    ~ .text_container
                    > .text_item
                    > .text_item_content
                    > span {
                    transform: translateY(0);
                    opacity: 1;
                  }
                  :hover button {
                    opacity: 0;
                    transform: translateY(Ant_Group(-16));
                    transition: all 0.3s ease;
                  }
                  // 图片容器
                  .img_container {
                    width: 100%;
                    height: Ant_Group(390);
                    overflow: hidden;
                    & > img {
                      width: auto;
                      height: 100%;
                    }
                  }
                  // 文本容器
                  .text_container {
                    width: 100%;
                    height: Ant_Group(234);
                    position: absolute;
                    bottom: 0;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    transition: all 0.3s ease;
                    // 职业
                    & > p {
                      position: absolute;
                      top: Ant_Group(-40);
                      left: Ant_Group(16);
                      padding: Ant_Group(3) Ant_Group(20);
                      color: #fff;
                      font-size: Ant_Group(12);
                      background-color: rgba(0, 0, 0, 0.3);
                      height: Ant_Group(24);
                      line-height: Ant_Group(24);
                      text-align: center;
                      border-radius: Ant_Group(6);
                      transform: translateY(Ant_Group(84));
                      transition: all 0.3s ease;
                    }
                    .text_item {
                      padding: Ant_Group(24) Ant_Group(16) 0;
                      background-color: rgba(255, 255, 255, 0.96);
                      transform: translateY(Ant_Group(84));
                      transition: all 0.3s ease;
                      box-sizing: border-box;
                      overflow: hidden;
                      // 文本内容
                      .text_item_content {
                        width: 100%;
                        height: Ant_Group(153);
                        padding: 0 Ant_Group(8);
                        box-sizing: border-box;
                        h2 {
                          font-size: Ant_Group(20);
                          font-weight: 500;
                          color: #333;
                          margin: 0;
                          height: Ant_Group(30);
                          line-height: Ant_Group(30);
                        }
                        & > span {
                          margin: Ant_Group(8) 0;
                          font-size: Ant_Group(14);
                          font-weight: 400;
                          color: #666;
                          line-height: Ant_Group(22);
                          padding: 0;
                          transform: translateY(Ant_Group(16));
                          opacity: 0;
                          transition: all 0.3s ease;
                        }
                      }
                    }
                  }
                  // // 底部人物信息栏
                  .people_info_bar {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    .people_info {
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      padding: 0 Ant_Group(24) Ant_Group(16);
                      .job_and_img {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        .small_img_container {
                          width: Ant_Group(40);
                          height: Ant_Group(40);
                          margin-right: Ant_Group(16);
                          border-radius: 50%;
                          overflow: hidden;
                          & > img{
                            width: auto;
                            height: 100%;
                            transform: translate(-8px);
                          }
                        }
                        p {
                          font-size: Ant_Group(16);
                          color: rgba(153, 153, 153, 1);
                          font-weight: 400;
                        }
                      }
                      button {
                        color: #1677ff;
                        background-color: transparent;
                        border: none;
                        display: flex;
                        align-items: center;
                        i {
                          font-weight: bolder;
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    // 主体底部小圆
    .main_footer_img {
      position: absolute;
      width: Ant_Group(190);
      right: 0;
      bottom: Ant_Group(110);
      transform: rotateY(180deg);
    }
    // 主体背景圆
    .main_bgcImg {
      width: Ant_Group(1200);
      position: absolute;
      right: 0;
      top: 60%;
      z-index: -999;
    }
  }
  // 底部
  footer {
    @include footer;
  }
  .backTop{
    @include backTop;
  }
}
